<template>
<div class="pageHome">
  <div style="height: 3rem;">
  </div>
  <!-- toast -->
  <div id="toastHome" style="display: none;">
  <div class="weui-mask_transparent"></div>
  <div class="weui-toast">
      <p class="weui-toast__content" style="color: white;">请选择分类</p>
  </div>
  </div>
  <!-- <div class="logo"> -->
    <!-- <img src="../../static/logoW.png" alt=""> -->
    <!-- <p>亲子公号查找</p>
  </div> -->
  <!-- <div class="line"></div> -->
  <div class="content">
  <div class="guide">
    去哪看看
  </div>
  <div class="interestBox">
    <div class="row">
      <div class="age op" id="1" v-on:click="ClickBookHistory">历史书单</div>
      <div class="age op" id="2" v-on:click="ClickBookSave">下载地址</div>
    </div>
  </div>
  <div class="placeHolder">
  </div>
  <!-- <div class="line"></div> -->
  </div>
  <div class="tip">
    <p>长按关注万物增长</p>
    <img src="../../static/qrcode_for_gh_ad3c85cf84ab_430.jpg" alt="">
  </div>
</div>
</template>

<script>
// import wx from 'weixin-js-sdk';
import $ from 'jquery';
// import {track} from '../statistics/mongo';

export default {
  data() {
    // console.log('data');
    return {};
  },
  /**
   * created
   */
  created() {
    // console.log('homeCreated');
    // console.log('wx', wx);
    // 初始化用户信息
    // User.initAccessInfo();
    const user = JSON.parse(window.localStorage.getItem('ict48-user-info'));
    // console.log('获取到了用户信息', user)
  },
  route: {
    data() {}
  },
  /**
   * beforeDestroy
   */
  beforeDestroy() {
  },
  /**
   * mounted
   */
  mounted() {
  },
  methods: {
    ClickBookHistory() {
      this.$router.push('/readhistory')
      window.location.reload()
    },
    ClickBookSave() {
      this.$router.push('/booksave')
      window.location.reload()
    }
  }
}
</script>

<style lang="scss" scoped>
.toastHome {
  // z-index: 998;
}
.weui-toast {
  height: 7.6em;
  line-height: 7.6rem;
}
.placeHolder {
    background-color: #f7bbba;
    height: 0rem;
}
.op {
    opacity: 0.4;
}
.pageHome {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    padding-bottom: 3rem;
    z-index: 995;
    background-color: white;
    // background-color: #ffe8ee;
    // background-color: #f7bbba;
    // background-color: #FBAC3B;
    p,
    span {
        font-family: Helvetica Neue,Tahoma,Arial;
    }
}
.content {
  border-style: solid;
  border-color: #efeff4;
  border-width: 1px;
  margin: 0.7rem;
}
.line {
    opacity: 0.5;
    height: 1rem;
    margin: 0 1.2rem;
    border-top-color: #dc8fa9;
    border-top-style: solid;
    border-radius: 15px;
    border-width: 1px;
    margin-top: 1rem;
}
.logo {
    padding-top: 1rem;
    p {
        color: #dc8fa9;
    }
    img {
        width: 5rem;
    }
}
// .action {
//     display: flex;
//     position: fixed;
//     bottom: 1rem;
//     width: 100%;
//     .actionBtn {
//         flex: 1;
//         height: 5rem;
//         line-height: 5rem;
//         margin: 1rem 1.5rem;
//         background-color: white;
//         font-size: 16px;
//     }
// }
.confirm {
      // position: fixed;
      bottom: 1rem;
      width: 100%;
      // text-align: center;
      position: relative;
          .actionBtn {
              // background-color: rgba(236, 236, 236, 0.5);
              background-color: #c76060;
              height: 3rem;
              line-height: 3rem;
              margin: 3rem 1.5rem 0rem 1.5rem;
              font-size: 16px;
          }
}
.guide {
    // color: #dc8fa9;
    color: #333;
    font-size: 10px;
    margin-top: 1.5rem;
}
.interestBox {
    margin: 1.2rem 1rem;
    .row {
        display: flex;
        margin: 1rem 0;
        .age {
          flex: 1;
          height: 2rem;
          line-height: 2rem;
          background-color: #F5F5F5;
          margin: 0.5rem;
          // color: #808080;
          color: #000000;
          font-size: 12px;
          border-color: #d5d5d6;
          border-width: 1px;
          border-style: solid;
        }
        .classfiy {
            flex: 1;
            height: 2rem;
            line-height: 2rem;
            background-color: #c76060;
            margin: 0.5rem;
            color: white;
            font-size: 12px;
            border-radius: 15px;
        }
    }
}
.tip {
    // position: fixed;
    // width: 100%;
    // bottom: 1rem;
    padding: 0.5rem;
    img {
      width: 4rem;
    }
    p {
        // color: #dc8fa9;
        color: #b2b2b2;
        font-size: 10px;
    }
}
</style>
